<template>
  <div>
    <!--增加模块-->
    <div id="n-module" :style="nmoudleStyle">
      <nmodule />
    </div>

    <!--nav-->
    <div id="t-nav" :style="navStyle">
      <Tnav />
    </div>

    <!--专题切换-->
    <div v-show="subshow" id="subjects" :style="subjectsStyle">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item
          v-for="(item, index) in subjects"
          :key="index"
          :index="index.toString()"
          @click="handleClick(index)"
          >{{ item.name }}</el-menu-item
        >
      </el-menu>
    </div>

    <!--left-->
    <div id="t-left" :style="leftStyle">
      <Tleft />
    </div>
    <!--right-->
    <div id="t-right" :style="rightStyle">
      <Tright />
    </div>
    <!--gis-->
    <div v-if="gishow" id="t-gis"></div>
    <!--ue-->
    <iframe
      :src="ueurl"
      v-else
      id="UE"
      :style="ueStyle"
      frameBorder="0"
    ></iframe>
  </div>
</template>

<script>
import tevd from "tevd";
export default {
  name: "t-frame",
  components: {
    Tnav: () => import("./t-nav"),
    Tleft: () => import("./t-left"),
    Tright: () => import("./t-right"),
    nmodule: () => import("./n-module"),
  },
  data() {
    return {
      navStyle: this.Tebs.adapStyle.nav,
      leftStyle: this.Tebs.adapStyle.left,
      rightStyle: this.Tebs.adapStyle.right,
      ueStyle: this.Tebs.adapStyle.ue,
      subjectsStyle: this.Tebs.adapStyle.subjects,
      nmoudleStyle: this.Tebs.adapStyle.nmodule,
      gishow: true,
      ueurl: "",
      subjects: [],
      activeIndex: "0",
      activeColor: "#409EFF",
      subshow: true,
    };
  },
  mounted() {
    this.$store.commit("nmodule", window.conf.nmodule);

    this.subjects = window.conf.subjects;

    let _subjects = JSON.parse(JSON.stringify(window.conf.subjects));
    this.$store.state.lpage = _subjects[0].left;
    this.$store.state.rpage = _subjects[0].right;

    this.subshow = window.conf.showMenu;

    //UE引擎
    switch (window.conf.gisType) {
      case "ue":
        this.gishow = false;
        //初始化ue对象
        this.Tebs.webGis = new tevd("UE");
        this.ueurl = window.conf.ueUrl;
        document.getElementById("UE").onload = function () {};
        break;
      case "hf":
        let _obj = {
          container: "t-gis",
          cesium: Cesium,
        };
        Object.assign(_obj, window.conf.gisparams);
        this.Tebs.gisHFinit(_obj);
        this.gisInit(this.Tebs.webGis);
        break;
      case "bj":
        let me = this;
        this.Tebs.gisBJinit(this.Conf.gisparams, function () {
          me.gisInit(_this.Tebs.webGis);
        });
        break;
    }
  },
  methods: {
    handleClick: function (index) {
      let subject = window.conf.subjects[index];
      this.$store.commit("lpagehandle", subject.left);
      this.$store.commit("rpagehandle", subject.right);
    },
  },
  beforeUpdate() {
    if (window.conf.showMenu) {
      let _w = parseInt(
        getComputedStyle(document.getElementById("subjects")).width
      );
      this.subjectsStyle.left = (window.conf.width - _w) / 2 + "px";
      this.subjectsStyle.transformOrigin =
        "-" + this.subjectsStyle.left + " -" + window.conf.top + "px";
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#t-nav {
  position: absolute;
  z-index: 9;
  transform-origin: 0px 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("../assets/image/global/top.png");
}
#subjects {
  position: absolute;
  z-index: 9;
}
#t-left {
  position: absolute;
  left: 0;
  z-index: 8;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("../assets/image/global/left.png");
  box-sizing: border-box;
}
#t-right {
  position: absolute;
  right: 0;
  z-index: 8;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: url("../assets/image/global/right.png");
  box-sizing: border-box;
}
#t-gis {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
}
#UE {
  position: fixed;
  top: 0;
}
#n-module {
  position: absolute;
  z-index: 9;
}
</style>
